<template>
  <table>
    <tbody>
      <tr>
       <td :colspan="datasource.children && datasource.children.length ? datasource.children.length*2 : null">
        <div class="node" :id="datasource.id" @click.stop="handleClick(datasource)">
          <slot :node-data="datasource">
            <div class="title" :style="getTitleStyle(datasource)" :title="datasource.name">
              <span class="title-text">{{ datasource.name }}</span>
              <span 
                v-if="datasource.children && datasource.children.length" 
                class="expand-btn"
                @click.stop="toggleExpand"
              >
                {{ expanded ? '−' : '+' }}
              </span>
              <div class="tooltip" v-if="datasource.name.length > 10">{{ datasource.name }}</div>
            </div>
            <div class="content">
              <el-tag size="mini" :type="datasource.status === 1 ? 'success' : 'info'">
                {{ datasource.status === 1 ? '正常' : '停用' }}
              </el-tag>
              <div class="operations">
                <el-button 
                  type="text" 
                  size="mini" 
                  @click.stop="$emit('node-add', datasource)"
                  v-if="canAddChild(datasource)"
                >
                  <i class="el-icon-plus"></i>新增
                </el-button>
                <el-button type="text" size="mini" @click.stop="$emit('node-update', datasource)">修改</el-button>
                <el-button type="text" size="mini" @click.stop="$emit('node-delete', datasource)">删除</el-button>
              </div>
            </div>
          </slot>
        </div>
       </td>
      </tr>
      <template v-if="datasource.children && datasource.children.length && expanded">
        <tr class="lines">
          <td :colspan="datasource.children.length*2">
            <div class="downLine"></div>
          </td>
        </tr>
        <tr class="lines">
          <td class="rightLine"></td>
          <template v-for="n in (datasource.children.length-1)">
            <td :key="'left-'+n" class="leftLine topLine"></td>
            <td :key="'right-'+n" class="rightLine topLine"></td>
          </template>
          <td class="leftLine"></td>
        </tr>
        <tr class="nodes">
          <td colspan="2" v-for="child in datasource.children" :key="child.id">
            <organization-chart-node 
              :datasource="child" 
              :handle-click="handleClick"
              @node-add="$emit('node-add', $event)"
              @node-update="$emit('node-update', $event)"
              @node-delete="$emit('node-delete', $event)"
            >
              <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
                <slot :name="slot" v-bind="scope"/>
              </template>
            </organization-chart-node>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'organization-chart-node',
  props: {
    datasource: Object,
    handleClick: Function
  },
  data() {
    return {
      expanded: true
    }
  },
  methods: {
    getTitleStyle(node) {
      const styles = {
        0: { backgroundColor: '#409EFF' }, // 总部
        1: { backgroundColor: '#67C23A' }, // 烟站
        2: { backgroundColor: '#E6A23C' }, // 乡镇
        3: { backgroundColor: '#F56C6C' }, // 乡村组
        4: { backgroundColor: '#909399' }, // 育苗点
        5: { backgroundColor: '#8E44AD' }  // 仓库
      }
      return styles[node.deptType] || {}
    },
    toggleExpand() {
      this.expanded = !this.expanded
    },
    renderContent(h, data) {
      return h('div', {
        class: {
          'custom-org-node': true,
          [this.getNodeClass(data)]: true
        },
        style: {
          cursor: 'pointer'
        }
      }, [
        h('div', {
          class: 'title'
        }, data.label),
        h('div', {
          class: 'status'
        }, [
          h('el-tag', {
            props: {
              size: 'mini',
              type: data.status === 1 ? 'success' : 'info'
            }
          }, data.status === 1 ? '正常' : '停用')
        ]),
        h('div', {
          class: 'operations'
        }, [
          h('el-button', {
            props: {
              type: 'text',
              size: 'mini'
            },
            on: {
              click: (e) => {
                e.stopPropagation()
                this.handleAddChild(data)
              }
            }
          }, [
            h('i', { class: 'el-icon-plus' }),
            '新增'
          ]),
          h('el-button', {
            props: {
              type: 'text',
              size: 'mini'
            },
            on: {
              click: (e) => {
                e.stopPropagation()
                this.handleUpdate(data)
              }
            }
          }, '修改'),
          h('el-button', {
            props: {
              type: 'text',
              size: 'mini'
            },
            on: {
              click: (e) => {
                e.stopPropagation()
                this.handleDelete(data)
              }
            }
          }, '删除')
        ])
      ])
    },
    canAddChild(node) {
      // 根据节点类型判断是否可以添加子节点
      switch (node.deptType) {
        case 0: // 总部
          return true
        case 1: // 烟站
          return true
        case 2: // 乡镇
          return true
        case 3: // 乡村组
          return false
        case 4: // 育苗点
          return false
        case 5: // 仓库
          return false
        default:
          return false
      }
    }
  }
}
</script>

<style scoped>
.node {
  padding: 2px;
  min-width: 200px;
  max-width: 300px;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background: white;
  position: relative;
  margin: 0 auto;
}

.title {
  padding: 8px 32px 8px 8px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-text {
  word-break: break-all;
  white-space: pre-wrap;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.expand-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.content {
  padding: 8px;
  text-align: center;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.operations {
  margin-top: 4px;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.node:hover .operations {
  display: flex;
}

.tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1000;
  display: none;
  white-space: nowrap;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
}

.title:hover .tooltip {
  display: block;
}
</style> 